<!-- 年规 - 团队规划 - 主页 -->
<template>
  <view>
    <template v-if="!state.loading">
      <Add v-if="isEdit && (isSocietyManager || isPlanManager)" ref="addRef" @confirm="loadData" />
      <Detail v-else :data="state.data" @edit="state.edit = true" />
    </template>
    <view v-else class="h-600 flex flex-col justify-center items-center">
      <u-loading size="60" color="#F4AF22" />
    </view>
  </view>
</template>
<script setup>
import { getTeamPlanDetail } from '@/common/http/module/plan.js'
import Add from './add.vue'
import Detail from './detail.vue'

import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const addRef = ref()
const state = reactive({
  loading: true,
  edit: false,
  data: ''
})

const isEdit = computed(() => {
  const isEmpty = state.data?.is_empty ?? true
  return (!state.data || isEmpty) || state.edit
})

const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)
const isPlanManager = computed(() => userStore.userInfo.id == state.data?.team_planning?.id)

function loadData() {
  state.loading = true
  getTeamPlanDetail(userStore.currentSocietyId, planStore.year).then(res => {
    state.data = res.data
    state.edit = false
    state.loading = false
  }).catch(() => state.loading = false)
}

function onMemberChange(list) {
  if (!list || list.length == 0) return
  addRef.value.onUserSelect(list[0])
}

function refresh() {
  addRef.value.refresh()
}

onLoad(() => loadData())

defineExpose({ onMemberChange, refresh })
</script>

<style lang="scss" scoped></style>
